<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cesium 天气效果系统</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html, body, #cesiumContainer {
            width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }
        .control-panel {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(42, 42, 42, 0.85);
            padding: 15px;
            border-radius: 8px;
            color: white;
            max-width: 320px;
            z-index: 1000;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            max-height: 90vh;
            overflow-y: auto;
        }
        .control-group {
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #555;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
            color: #e0e0e0;
        }
        input[type="range"] {
            width: 100%;
            margin: 5px 0;
        }
        button {
            background: #4CAF50;
            border: none;
            color: white;
            padding: 8px 15px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
            transition: background 0.3s;
        }
        button:hover {
            background: #45a049;
        }
        .value-display {
            font-size: 12px;
            color: #aaa;
            margin-top: 5px;
        }
        h3 {
            margin-top: 0;
            border-bottom: 1px solid #555;
            padding-bottom: 5px;
            color: #fff;
        }
        .info-box {
            background: rgba(0, 100, 200, 0.7);
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
            font-size: 12px;
            line-height: 1.4;
        }
        .snow-toggle {
            background: #2196F3;
        }
        .rain-toggle {
            background: #2196F3;
        }
        .cloud-toggle {
            background: #9C27B0;
        }
        .fog-toggle {
            background: #607D8B;
        }
        .reset-btn {
            background: #FF5722;
        }
        .title {
            text-align: center;
            margin-bottom: 10px;
            color: #4FC3F7;
        }
        .status {
            font-size: 12px;
            margin-top: 10px;
            padding: 5px;
            border-radius: 3px;
            text-align: center;
        }
        .status.on {
            background: rgba(76, 175, 80, 0.3);
            color: #4CAF50;
        }
        .status.off {
            background: rgba(244, 67, 54, 0.3);
            color: #F44336;
        }
        .debug-info {
            font-size: 11px;
            color: #FF9800;
            margin-top: 5px;
        }
        .weather-selector {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        .weather-btn {
            flex: 1;
            margin: 0 5px;
            text-align: center;
        }
        .weather-btn.active {
            background: #FF9800;
        }
        .effect-toggle {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-bottom: 15px;
        }
        .effect-btn {
            flex: 1;
            min-width: 70px;
        }
        .effect-btn.active {
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<div class="control-panel">
    <h3 class="title">🌦️ Cesium 天气效果系统</h3>

    <div class="weather-selector">
        <button id="snowBtn" class="weather-btn active">❄️ 雪天</button>
        <button id="rainBtn" class="weather-btn">🌧️ 雨天</button>
    </div>

    <div class="effect-toggle">
        <button id="precipitationToggle" class="effect-btn snow-toggle active">降水</button>
        <button id="cloudToggle" class="effect-btn cloud-toggle">云层</button>
        <button id="fogToggle" class="effect-btn fog-toggle">雾气</button>
    </div>

    <!-- 降水控制 -->
    <div id="precipitationControls" class="control-group">
        <label for="intensity">降水强度:</label>
        <input type="range" id="intensity" min="10" max="500" value="150">
        <div class="value-display" id="intensity-value">150</div>

        <label for="particleSize">粒子大小:</label>
        <input type="range" id="particleSize" min="5" max="30" value="15">
        <div class="value-display" id="particleSize-value">15</div>

        <label for="windSpeed">风速:</label>
        <input type="range" id="windSpeed" min="0" max="20" value="5">
        <div class="value-display" id="windSpeed-value">5</div>
    </div>

    <!-- 云层控制 -->
    <div id="cloudControls" class="control-group" style="display: none;">
        <label for="cloudSize">云朵大小:</label>
        <input type="range" id="cloudSize" min="500" max="5000" value="1500">
        <div class="value-display" id="cloudSize-value">1500 米</div>

        <label for="cloudHeight">云朵高度:</label>
        <input type="range" id="cloudHeight" min="1000" max="5000" value="2000">
        <div class="value-display" id="cloudHeight-value">2000 米</div>

        <label for="cloudOpacity">云朵透明度:</label>
        <input type="range" id="cloudOpacity" min="10" max="100" value="70">
        <div class="value-display" id="cloudOpacity-value">70</div>
    </div>

    <!-- 雾气控制 -->
    <div id="fogControls" class="control-group" style="display: none;">
        <label for="fogDensity">雾气密度:</label>
        <input type="range" id="fogDensity" min="0" max="50" value="15">
        <div class="value-display" id="fogDensity-value">15</div>

        <label for="fogHeight">雾气高度:</label>
        <input type="range" id="fogHeight" min="0" max="1000" value="300">
        <div class="value-display" id="fogHeight-value">300 米</div>
    </div>

    <div class="control-group">
        <button id="toggleAll" class="reset-btn">全部关闭</button>
        <button id="resetBtn" class="reset-btn">重置参数</button>
    </div>

    <div class="status on" id="statusDisplay">雪天效果: 开启</div>
    <div class="debug-info" id="debugInfo">系统初始化中...</div>
    <div class="info-box">
        <p>效果范围：北京区域 (115.5°E-117.5°E, 39°N-41°N)</p>
        <p>使用Cesium实体和材质模拟天气效果</p>
    </div>
</div>

<script>
    // 使用用户提供的Cesium Ion access token
    Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwNWY1NDhkNy00NDI4LTQyZWQtYTRmNS1iNGQ0MjMxNDIzZWMiLCJpZCI6MTU0NDA1LCJpYXQiOjE2ODk1NzY0ODl9.1zt09SfJKVhZNs-zzn3fN5pzpkrYEzatuDTZYviZx1I";

    // 初始化Cesium viewer
    const viewer = new Cesium.Viewer('cesiumContainer', {
        timeline: false,
        animation: false,
        baseLayerPicker: false,
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        fullscreenButton: false
    });

    // 设置初始相机位置 - 北京
    viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 5000),
        orientation: {
            heading: 0,
            pitch: -Math.PI/4,
            roll: 0
        }
    });

    // 定义效果区域（北京区域）
    const effectRectangle = Cesium.Rectangle.fromDegrees(115.5, 39.0, 117.5, 41.0);

    // 天气效果参数
    let particles = [];
    let cloudEntity = null;
    let animationActive = false;
    let currentWindSpeed = 5;
    let particleSize = 15;
    let particleCount = 150;
    let currentWeatherType = 'snow'; // 'snow' 或 'rain'

    // 云和雾参数
    let cloudSize = 1500;
    let cloudHeight = 2000;
    let cloudOpacity = 70;
    let fogDensity = 15;
    let fogHeight = 300;

    // 效果状态
    let precipitationActive = true;
    let cloudActive = false;
    let fogActive = false;

    // 创建雪花图像
    function createSnowflakeImage() {
        const canvas = document.createElement('canvas');
        canvas.width = 64;
        canvas.height = 64;
        const context = canvas.getContext('2d');

        // 绘制透明背景
        context.clearRect(0, 0, 64, 64);

        // 绘制白色圆形雪花
        context.beginPath();
        context.arc(32, 32, 16, 0, Math.PI * 2);
        context.fillStyle = 'rgba(255, 255, 255, 0.9)';
        context.fill();

        // 添加雪花细节
        context.beginPath();
        context.arc(32, 32, 8, 0, Math.PI * 2);
        context.fillStyle = 'rgba(255, 255, 255, 0.7)';
        context.fill();

        return canvas;
    }

    // 创建雨滴图像
    function createRaindropImage() {
        const canvas = document.createElement('canvas');
        canvas.width = 16;
        canvas.height = 32;
        const context = canvas.getContext('2d');

        // 绘制透明背景
        context.clearRect(0, 0, 16, 32);

        // 绘制雨滴形状
        context.beginPath();
        context.moveTo(8, 0);
        context.lineTo(16, 16);
        context.lineTo(8, 32);
        context.lineTo(0, 16);
        context.closePath();

        // 使用蓝色渐变
        const gradient = context.createLinearGradient(0, 0, 0, 32);
        gradient.addColorStop(0, 'rgba(100, 150, 255, 0.9)');
        gradient.addColorStop(1, 'rgba(50, 100, 200, 0.7)');

        context.fillStyle = gradient;
        context.fill();

        return canvas;
    }

    // 创建云图像 - 优化版
    function createCloudImage() {
        const canvas = document.createElement('canvas');
        canvas.width = 256;
        canvas.height = 128;
        const context = canvas.getContext('2d');

        // 绘制透明背景
        context.clearRect(0, 0, 256, 128);

        // 绘制多个圆形组成云朵
        const gradient = context.createRadialGradient(128, 64, 0, 128, 64, 80);
        gradient.addColorStop(0, 'rgba(255, 255, 255, 0.9)');
        gradient.addColorStop(1, 'rgba(240, 240, 240, 0.5)');

        // 绘制多个重叠的圆形形成云朵
        const circles = [
            {x: 80, y: 50, r: 25},
            {x: 120, y: 40, r: 30},
            {x: 160, y: 50, r: 25},
            {x: 100, y: 80, r: 20},
            {x: 140, y: 85, r: 20}
        ];

        context.fillStyle = gradient;

        for (const circle of circles) {
            context.beginPath();
            context.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2);
            context.fill();
        }

        return canvas;
    }

    // 创建粒子实体
    function createParticle(id, weatherType) {
        // 在效果区域内随机位置
        const west = effectRectangle.west;
        const south = effectRectangle.south;
        const east = effectRectangle.east;
        const north = effectRectangle.north;

        const lon = west + Math.random() * (east - west);
        const lat = south + Math.random() * (north - south);

        // 根据天气类型设置不同的高度和速度
        let height, fallSpeed;
        let image, width, heightRatio;

        if (weatherType === 'snow') {
            height = 2000 + Math.random() * 1000; // 2000-3000米高度
            fallSpeed = -1 - Math.random() * 2; // 较慢的下落速度
            image = createSnowflakeImage();
            width = particleSize;
            heightRatio = 1; // 正方形
        } else { // rain
            height = 1500 + Math.random() * 500; // 1500-2000米高度
            fallSpeed = -5 - Math.random() * 5; // 较快的下落速度
            image = createRaindropImage();
            width = particleSize / 2; // 雨滴较窄
            heightRatio = 2; // 高度是宽度的两倍
        }

        const position = Cesium.Cartesian3.fromRadians(lon, lat, height);

        // 创建粒子实体
        const particle = viewer.entities.add({
            id: `${weatherType}_particle_` + id,
            position: position,
            billboard: {
                image: image,
                width: width,
                height: width * heightRatio,
                scale: 1.0,
                color: weatherType === 'snow' ?
                    Cesium.Color.WHITE.withAlpha(0.8) :
                    Cesium.Color.CORNFLOWERBLUE.withAlpha(0.7),
                heightReference: Cesium.HeightReference.NONE
            }
        });

        return {
            entity: particle,
            weatherType: weatherType,
            velocity: {
                x: (Math.random() - 0.5) * currentWindSpeed * 0.1,
                y: (Math.random() - 0.5) * currentWindSpeed * 0.1,
                z: fallSpeed
            },
            rotation: 0,
            rotationSpeed: (Math.random() - 0.5) * (weatherType === 'snow' ? 0.1 : 0.05)
        };
    }

    // 创建云实体 - 优化版
    function createCloud() {
        // 在北京上空固定位置
        const lon = Cesium.Math.toRadians(116.4);
        const lat = Cesium.Math.toRadians(39.9);
        const height = cloudHeight;

        const position = Cesium.Cartesian3.fromRadians(lon, lat, height);

        // 创建云实体
        const cloud = viewer.entities.add({
            id: `cloud`,
            position: position,
            billboard: {
                image: createCloudImage(),
                width: cloudSize,
                height: cloudSize / 2,
                scale: 1.0,
                color: Cesium.Color.WHITE.withAlpha(cloudOpacity / 100),
                heightReference: Cesium.HeightReference.NONE
            }
        });

        return cloud;
    }

    // 创建降水效果
    function createPrecipitationEffect() {
        // 清除现有的粒子
        removePrecipitationEffect();

        // 获取控制参数
        particleCount = parseInt(document.getElementById('intensity').value);
        particleSize = parseInt(document.getElementById('particleSize').value);
        currentWindSpeed = parseInt(document.getElementById('windSpeed').value);

        // 创建粒子
        for (let i = 0; i < particleCount; i++) {
            particles.push(createParticle(i, currentWeatherType));
        }

        // 更新状态显示
        updateStatusDisplay();

        // 更新调试信息
        updateDebugInfo(`创建了 ${particleCount} 个${currentWeatherType === 'snow' ? '雪花' : '雨滴'}`);
    }

    // 创建云层效果 - 优化版
    function createCloudEffect() {
        // 清除现有的云
        removeCloudEffect();

        // 获取控制参数
        cloudSize = parseInt(document.getElementById('cloudSize').value);
        cloudHeight = parseInt(document.getElementById('cloudHeight').value);
        cloudOpacity = parseInt(document.getElementById('cloudOpacity').value);

        // 创建云
        cloudEntity = createCloud();

        // 更新状态显示
        updateStatusDisplay();

        // 更新调试信息
        updateDebugInfo("创建了一朵云");
    }

    // 创建雾气效果 - 使用Cesium内置雾效
    function createFogEffect() {
        // 获取控制参数
        fogDensity = parseInt(document.getElementById('fogDensity').value);
        fogHeight = parseInt(document.getElementById('fogHeight').value);

        // 启用Cesium内置雾效
        viewer.scene.fog.enabled = true;
        viewer.scene.fog.density = fogDensity / 10000; // 调整密度范围
        viewer.scene.fog.minimumBrightness = 0.1;

        // 更新状态显示
        updateStatusDisplay();

        // 更新调试信息
        updateDebugInfo(`雾气效果已启用 (密度: ${fogDensity})`);
    }

    // 移除降水效果
    function removePrecipitationEffect() {
        // 移除所有粒子实体
        for (const particle of particles) {
            viewer.entities.remove(particle.entity);
        }
        particles = [];

        // 更新状态显示
        updateStatusDisplay();

        // 更新调试信息
        updateDebugInfo("降水效果已移除");
    }

    // 移除云层效果
    function removeCloudEffect() {
        // 移除云实体
        if (cloudEntity) {
            viewer.entities.remove(cloudEntity);
            cloudEntity = null;
        }

        // 更新状态显示
        updateStatusDisplay();

        // 更新调试信息
        updateDebugInfo("云层效果已移除");
    }

    // 移除雾气效果
    function removeFogEffect() {
        // 禁用Cesium内置雾效
        viewer.scene.fog.enabled = false;

        // 更新状态显示
        updateStatusDisplay();

        // 更新调试信息
        updateDebugInfo("雾气效果已移除");
    }

    // 粒子动画
    function animateParticles() {
        if (!animationActive) return;

        // 更新每个粒子的位置
        for (const particle of particles) {
            const position = particle.entity.position.getValue(Cesium.JulianDate.now());
            if (!position) continue;

            // 更新位置
            const newPosition = new Cesium.Cartesian3(
                position.x + particle.velocity.x,
                position.y + particle.velocity.y,
                position.z + particle.velocity.z
            );

            // 更新实体位置
            particle.entity.position = newPosition;

            // 更新旋转（雪花旋转明显，雨滴旋转较小）
            particle.rotation += particle.rotationSpeed;

            // 如果粒子落到地面以下，重置到顶部
            const cartographic = Cesium.Cartographic.fromCartesian(newPosition);
            if (cartographic.height < 0) {
                const west = effectRectangle.west;
                const south = effectRectangle.south;
                const east = effectRectangle.east;
                const north = effectRectangle.north;

                const lon = west + Math.random() * (east - west);
                const lat = south + Math.random() * (north - south);

                // 根据天气类型设置不同的重置高度
                const height = particle.weatherType === 'snow' ?
                    2000 + Math.random() * 1000 :
                    1500 + Math.random() * 500;

                const newPos = Cesium.Cartesian3.fromRadians(lon, lat, height);
                particle.entity.position = newPos;

                // 重置速度
                const fallSpeed = particle.weatherType === 'snow' ?
                    -1 - Math.random() * 2 :
                    -5 - Math.random() * 5;

                particle.velocity = {
                    x: (Math.random() - 0.5) * currentWindSpeed * 0.1,
                    y: (Math.random() - 0.5) * currentWindSpeed * 0.1,
                    z: fallSpeed
                };
            }
        }

        // 继续动画
        requestAnimationFrame(animateParticles);
    }

    // 切换天气类型
    function switchWeatherType(type) {
        currentWeatherType = type;

        // 更新按钮状态
        document.getElementById('snowBtn').classList.toggle('active', type === 'snow');
        document.getElementById('rainBtn').classList.toggle('active', type === 'rain');

        // 如果降水效果正在运行，重新创建效果
        if (precipitationActive) {
            createPrecipitationEffect();
        }
    }

    // 切换效果显示
    function toggleEffectControls(effectType) {
        // 隐藏所有控制组
        document.getElementById('precipitationControls').style.display = 'none';
        document.getElementById('cloudControls').style.display = 'none';
        document.getElementById('fogControls').style.display = 'none';

        // 显示选中的控制组
        if (effectType === 'precipitation') {
            document.getElementById('precipitationControls').style.display = 'block';
        } else if (effectType === 'cloud') {
            document.getElementById('cloudControls').style.display = 'block';
        } else if (effectType === 'fog') {
            document.getElementById('fogControls').style.display = 'block';
        }
    }

    // 切换效果状态
    function toggleEffect(effectType) {
        if (effectType === 'precipitation') {
            precipitationActive = !precipitationActive;
            document.getElementById('precipitationToggle').classList.toggle('active', precipitationActive);

            if (precipitationActive) {
                createPrecipitationEffect();
            } else {
                removePrecipitationEffect();
            }
        } else if (effectType === 'cloud') {
            cloudActive = !cloudActive;
            document.getElementById('cloudToggle').classList.toggle('active', cloudActive);

            if (cloudActive) {
                createCloudEffect();
            } else {
                removeCloudEffect();
            }
        } else if (effectType === 'fog') {
            fogActive = !fogActive;
            document.getElementById('fogToggle').classList.toggle('active', fogActive);

            if (fogActive) {
                createFogEffect();
            } else {
                removeFogEffect();
            }
        }

        // 更新状态显示
        updateStatusDisplay();
    }

    // 更新状态显示
    function updateStatusDisplay() {
        const statusDisplay = document.getElementById('statusDisplay');
        let statusText = "";

        if (precipitationActive) {
            statusText += `${currentWeatherType === 'snow' ? '雪天' : '雨天'} `;
        }
        if (cloudActive) {
            statusText += "云层 ";
        }
        if (fogActive) {
            statusText += "雾气 ";
        }

        if (statusText === "") {
            statusDisplay.textContent = "所有效果已关闭";
            statusDisplay.className = "status off";
        } else {
            statusDisplay.textContent = "开启效果: " + statusText;
            statusDisplay.className = "status on";
        }
    }

    // 更新调试信息
    function updateDebugInfo(message) {
        const debugInfo = document.getElementById('debugInfo');
        debugInfo.textContent = message;
        console.log("天气效果调试:", message);
    }

    // 控制面板交互
    document.getElementById('intensity').addEventListener('input', function(e) {
        const value = e.target.value;
        document.getElementById('intensity-value').textContent = value;

        if (precipitationActive) {
            createPrecipitationEffect();
        }
    });

    document.getElementById('particleSize').addEventListener('input', function(e) {
        const value = e.target.value;
        document.getElementById('particleSize-value').textContent = value;
        particleSize = parseInt(value);

        // 更新所有粒子的尺寸
        for (const particle of particles) {
            const width = particle.weatherType === 'snow' ? particleSize : particleSize / 2;
            const heightRatio = particle.weatherType === 'snow' ? 1 : 2;

            particle.entity.billboard.width = width;
            particle.entity.billboard.height = width * heightRatio;
        }
    });

    document.getElementById('windSpeed').addEventListener('input', function(e) {
        const value = e.target.value;
        document.getElementById('windSpeed-value').textContent = value;
        currentWindSpeed = parseInt(value);

        // 更新所有粒子的速度
        for (const particle of particles) {
            particle.velocity.x = (Math.random() - 0.5) * currentWindSpeed * 0.1;
            particle.velocity.y = (Math.random() - 0.5) * currentWindSpeed * 0.1;
        }
    });

    document.getElementById('cloudSize').addEventListener('input', function(e) {
        const value = e.target.value;
        document.getElementById('cloudSize-value').textContent = value + " 米";
        cloudSize = parseInt(value);

        // 更新云的大小
        if (cloudEntity) {
            cloudEntity.billboard.width = cloudSize;
            cloudEntity.billboard.height = cloudSize / 2;
        }
    });

    document.getElementById('cloudHeight').addEventListener('input', function(e) {
        const value = e.target.value;
        document.getElementById('cloudHeight-value').textContent = value + " 米";
        cloudHeight = parseInt(value);

        // 更新云的高度
        if (cloudEntity) {
            const position = Cesium.Cartesian3.fromRadians(
                Cesium.Math.toRadians(116.4),
                Cesium.Math.toRadians(39.9),
                cloudHeight
            );
            cloudEntity.position = position;
        }
    });

    document.getElementById('cloudOpacity').addEventListener('input', function(e) {
        const value = e.target.value;
        document.getElementById('cloudOpacity-value').textContent = value;
        cloudOpacity = parseInt(value);

        // 更新云的透明度
        if (cloudEntity) {
            cloudEntity.billboard.color = Cesium.Color.WHITE.withAlpha(cloudOpacity / 100);
        }
    });

    document.getElementById('fogDensity').addEventListener('input', function(e) {
        const value = e.target.value;
        document.getElementById('fogDensity-value').textContent = value;

        if (fogActive) {
            createFogEffect();
        }
    });

    document.getElementById('fogHeight').addEventListener('input', function(e) {
        const value = e.target.value;
        document.getElementById('fogHeight-value').textContent = value + " 米";

        if (fogActive) {
            createFogEffect();
        }
    });

    document.getElementById('toggleAll').addEventListener('click', function() {
        // 关闭所有效果
        if (precipitationActive) toggleEffect('precipitation');
        if (cloudActive) toggleEffect('cloud');
        if (fogActive) toggleEffect('fog');

        this.textContent = precipitationActive || cloudActive || fogActive ? "全部关闭" : "全部开启";
    });

    document.getElementById('resetBtn').addEventListener('click', function() {
        // 重置所有参数
        document.getElementById('intensity').value = 150;
        document.getElementById('particleSize').value = 15;
        document.getElementById('windSpeed').value = 5;
        document.getElementById('cloudSize').value = 1500;
        document.getElementById('cloudHeight').value = 2000;
        document.getElementById('cloudOpacity').value = 70;
        document.getElementById('fogDensity').value = 15;
        document.getElementById('fogHeight').value = 300;

        document.getElementById('intensity-value').textContent = '150';
        document.getElementById('particleSize-value').textContent = '15';
        document.getElementById('windSpeed-value').textContent = '5';
        document.getElementById('cloudSize-value').textContent = '1500 米';
        document.getElementById('cloudHeight-value').textContent = '2000 米';
        document.getElementById('cloudOpacity-value').textContent = '70';
        document.getElementById('fogDensity-value').textContent = '15';
        document.getElementById('fogHeight-value').textContent = '300 米';

        // 重新创建效果
        if (precipitationActive) createPrecipitationEffect();
        if (cloudActive) createCloudEffect();
        if (fogActive) createFogEffect();

        updateDebugInfo("参数已重置");
    });

    document.getElementById('snowBtn').addEventListener('click', function() {
        switchWeatherType('snow');
    });

    document.getElementById('rainBtn').addEventListener('click', function() {
        switchWeatherType('rain');
    });

    document.getElementById('precipitationToggle').addEventListener('click', function() {
        toggleEffect('precipitation');
    });

    document.getElementById('cloudToggle').addEventListener('click', function() {
        toggleEffect('cloud');
        toggleEffectControls('cloud');
    });

    document.getElementById('fogToggle').addEventListener('click', function() {
        toggleEffect('fog');
        toggleEffectControls('fog');
    });

    // 初始创建效果
    createPrecipitationEffect();
    animationActive = true;
    animateParticles();

    // 添加调试信息
    updateDebugInfo("系统已初始化");
</script>
</body>
</html>